<template>
    <view class="login" :style="{height:wh+'px'}">
        <!-- 顶部图片区域 -->
        <view class="title">
            <image src="../../static/images/login.png" mode="aspectFit"></image>
            <image src="../../static/images/login2.png" mode="aspectFit"></image>
        </view>
        
        <!-- 登录表单区域 -->
        <view class="content">
            <!-- uni-forms 表单组件，用于表单验证 -->
            <uni-forms ref="logForm" :model="logFormData" :rules="rules" validate-trigger="bind">
                <!-- 用户名输入框 -->
                <uni-forms-item name="username">
                    <uni-easyinput type="text" placeholder="请输入用户名" v-model="logFormData.username" />
                </uni-forms-item>
                <!-- 密码输入框 -->
                <uni-forms-item name="password">
                    <uni-easyinput type="password" placeholder="请输入密码" v-model="logFormData.password" />
                </uni-forms-item>
            </uni-forms>
            <!-- 登录按钮 -->
            <button class="button" type="primary" @click="login()">登录</button>
        </view>
        
        <!-- 注册链接区域 -->
        <view class="register">
            <navigator url="/pages/register/register">还没有账号 ，点击注册</navigator>
        </view>
    </view>
</template>

<script setup>
    // 导入必要的依赖
    import { ref, computed } from "vue"
    import { userStore } from "../../store/userStore"
    
    // 初始化用户存储
    let store = userStore()
    
    // 计算窗口高度
    const wh = computed(() => {
        const sh = uni.getWindowInfo().screenHeight
        const wh = uni.getWindowInfo().windowHeight
        return wh
    })
    
    // 登录表单数据
    const logFormData = ref({
        username: '',
        password: ''
    })
    
    // 表单验证规则
    const rules = ref({
        // 用户名验证规则
        username: {
            rules: [{
                    required: true,
                    errorMessage: '请输入用户名',
                    trigger: ['blur', 'change']
                },
                {
                    // 自定义验证函数：验证用户名格式
                    validateFunction: function(rule, value, data, callback) {
                        if (value === '') {
                            return callback()
                        }
                        if (!/^\w{3,10}$/.test(value)) {
                            return callback('请输入3-10位数字字母和下划线作为用户名')
                        }
                        return callback()
                    },
                    trigger: ['blur', 'change']
                }
            ]
        },
        // 密码验证规则
        password: {
            rules: [{
                    required: true,
                    errorMessage: '请输入密码',
                    trigger: ['blur', 'change']
                },
                {
                    // 自定义验证函数：验证密码格式
                    validateFunction: function(rule, value, data, callback) {
                        if (value === '') {
                            return callback()
                        }
                        if (!/^[a-zA-Z0-9._!@#$%^&]{3,10}$/.test(value)) {
                            return callback('请输入3-10位数字字母和特殊字符密码')
                        }
                        return callback()
                    },
                    trigger: ['blur', 'change']
                }
            ]
        }
    })
    
    // 表单引用
    const logForm = ref(null)
    
    // 登录方法
    function login() {
        // 表单验证
        logForm.value.validate().then(res => {
            console.log("验证通过")
            console.log(res)
            // 发送登录请求
            uni.$post("/loginCustomer", res)
                .then(res2 => {
                    console.log(res2)
                    if (res2.code == 400) {
                        // 登录失败提示
                        uni.showToast({
                            title: "用户名或密码错误 "
                        })
                    } else if (res2.code == 200) {
                        // 登录成功，保存用户信息
                        store.addUserInfo(res2.id, res2.username, res.email, res2.mobile, res2.token)
                        // 返回上一页
                        uni.navigateBack()
                    }
                }).catch(err => {
                    console.log(err)
                })
        }).catch(err => {
            console.log("验证失败")
            console.log(err)
        })
    }
</script>

<style scoped>
    /* 登录页面整体样式 */
    .login {
        border: 1px solid red;
        position: relative;
    }

    /* 标题区域样式 */
    .login .title {
        margin-top: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* 第一张图片样式 */
    .login .title image:nth-child(1) {
        height: 50px;
    }

    /* 第二张图片样式 */
    .login .title image:nth-child(2) {
        height: 30px;
        margin-top: 10px;
    }

    /* 内容区域样式 */
    .login .content {
        margin: 10px 20px;
    }

    /* 登录按钮样式 */
    .login .content .button {
        margin-top: 20px;
        background-color: #007aff;
        color: #fff;
    }

    /* 注册链接样式 */
    .login .register {
        position: absolute;
        bottom: 20px;
        width: 100vw;
        text-align: center;
        color: #007aff;
        font-size: 20rpx;
    }
</style>